<template>
  <div>
    <button @click="sayHello" v-throttle>提交</button>
  </div>
</template>
<script>
// 自定义指令
Vue.directive("throttle", {
  bind: (el, binding) => {
    // 获取节流的时间
    let timer = binding.value;
    // 默认时间两秒
    if (!timer) timer = 2000;

    let cbFn;
    el.addEventListener(
      "click",
      (event) => {
        if (!cbFn) {
          cbFn = setTimeout(() => {
            cbFn = null;
          }, timer);
        } else {
          // 停止响应。相当于是直接返回
          event && event.stopImmediatePropagation();
        }
      },
      //   加上这个是在捕获阶段执行，比冒泡优先执行
      true
    );
  },
});
</script>
